<template>
  <div class='container' :style="{background:'rgb(40, 30, 47) url('+bgUrl+')  0 0 / 100% 100% no-repeat'}">
    <header id='header' :style="{background:'url('+headerUrl+')  0 0 / 100% 100% no-repeat'}">
      <h3 class="header-title">智慧经营平台</h3>
    </header>
    <!-- <div class="logo" :style="{background:'url('+logoUrl+') 0 0 / 100% 100% no-repeat'}"></div> -->
    <div class="logo">
      <!-- <img src="@/assets/image/loginlogo.png" alt=""> -->
      <span class="logo_text">智慧经营平台</span>
    </div>
    <div class="select">
      <p>操作<img src="@/assets/image/xl.png" alt=""></p>
      <ul class="select-ul">
        <li @click="onChange(1)">查看站点实况</li>
        <li @click="onChange(2)">{{ isFullscreen }}</li>
        <li @click="onChange(3)">退出登录</li>
      </ul>
    </div>
    <el-dropdown trigger="click" style="
      ont-size:1rem;
                 text-align: center;
                 position: absolute;
                 width: 8%;
                 height: 3rem;
                 line-height:3rem;
                 top:2%;
                 right: 17%;
                 border-radius: 4px;
                 box-shadow: 0 0px 0px 0 rgb(20 126 171) inset, 0 0.5px 1px 1px rgb(20 126 171);
                 border: 0px solid rgb(20 126 171);
                 padding-left: 10px;
                 font-size: 15px;
                 color:white;
                 cursor: pointer;
    ">
        <span class="el-dropdown-link">
            <span style="">油站:</span>
            <span>{{ state.stationName }}</span>
        </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in state.stations" @click.native="handleCommand(item)">{{
              item.站名
            }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-date-picker
      v-model="state.searchDate"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      format="YYYY-MM-DD"
      style=""/>
    <el-row class="body-layout-row-survey">

    </el-row>
    <el-row class="body-layout-row-content">
      <el-col :span="6" class="body-layout-col">
        <div class="body-chart-three">
          <p>
            油品销售升数</p>
          <oils-sale-num ref="oilsSaleNum"/>
        </div>
        <div style="height: 1%"></div>
        <div class="body-chart-three">
          <p>
            油品营收金额</p>
          <oils-sale-amount ref="oilsSaleAmount"/>
        </div>
        <div style="height: 1%"></div>
        <div class="body-chart-three">
          <p>支付方式统计</p>
          <payment-statistics ref="paymentStatistics"/>
        </div>
      </el-col>
      <el-col :span="12" class="body-layout-col">
        <div class="body-chart-summary">
          <real-time-revenue ref="realTimeRevenue"/>
        </div>
        <div style="height: 2%"></div>
        <el-col :span="24" style="height: 40%;width: 100%">
          <div class="body-chart" style="height: 100%;width: 100%">
            <p style="position: relative; top: -13px">
              油站油品销量排名</p>
            <oils-ranking ref="oilsRanking"/>
          </div>
        </el-col>
        <!-- <el-col :span="12" style="width: 2%;height: 40%"></el-col>
        <el-col :span="12" style="width: 49%;height: 39%">
          <div class="body-chart" style="height: 100%;width: 100%">
            <p>会员概况</p>
            <members-overview ref="membersOverview"/>
          </div>
        </el-col> -->
        <el-col :span="24" style="height: 1%;width: 100%"></el-col>
        <el-col :span="12" style="width: 49%;height: 39%">
          <div class="body-chart" style="height: 100%;width: 100%">
            <p>消费走势</p>
            <oils-sale-today-tend ref="oilsSaleTodayTend"/>
          </div>
        </el-col>
        <el-col :span="12" style="width: 2%;height: 40%"></el-col>
        <el-col :span="12" style="width: 49%;height: 39%">
          <div class="body-chart" style="height: 100%;width: 100%;">
            <p>车流量走势</p>
            <traffic-volume ref="trafficVolume"></traffic-volume>
          </div>
        </el-col>
      </el-col>
      <el-col :span="6" class="body-layout-col">
        <div class="body-chart-three">
          <p style="display: inline-block;margin-right: 5%;">
            消费金额同比</p>
          <el-button type="primary" circle size="small" @click="state.type=1">周</el-button>
          <el-button type="primary" circle size="small" @click="state.type=2">月</el-button>
          <el-button type="primary" circle size="small" @click="state.type=3">年</el-button>
          <oils-sale-trend :type="state.type" ref="oilsSaleTrend"/>
        </div>
        <div style="height: 1%"></div>
        <div class="body-chart-three">
          <p>今日油品液位仪实时数据</p>
          <oils-opw-real-time-data ref="oilsOpwRealTimeData"/>
        </div>
        <div style="height: 1%"></div>
        <div class="body-chart-three">
          <p>油品营收占比</p>
          <oils-in-come-proportion ref="oilsInComeProportion"/>
        </div>
      </el-col>
    </el-row>
    <div class="model_box">
      <el-dialog
      v-model="dialogVisible"
      width="1500px"
      :close-on-click-modal="false"
      class="custom-dialog"
    >
      <monitoring :stations="state.monitoringStations" :dialogVisible="dialogVisible" />
    </el-dialog>
    </div>
  </div>
  <!--  <v-chart :option="option" style="height: 300px"></v-chart>-->
</template>

<script lang="ts">
import {
  defineComponent, nextTick, onMounted, reactive, ref, watch,
} from 'vue';
import { useRouter } from 'vue-router';
import {
  ElLoading, ElMessageBox, ElSelect, ElDialog, ElMessage,
} from 'element-plus';
import { allStation, logout } from '../../api/dataScreen/index';
import bgUrl from '@/assets/image/bg.png';
import headerUrl from '@/assets/image/header.png';
import logoUrl from '@/assets/image/frlogonew.png';
import xjLogo from '@/assets/image/xjlogin2.png';
import {
  今日时间段消费走势图,
  今日车流量走势,
  会员概况,
  实时营收,
  支付方式统计,
  服务区油品销量排行,
  油品液位仪实时数据,
  油品营收占比,
  油品营收金额,
  油品销售升数与数量,
  油品销售金额趋势图,
  监控,
} from './chart';

export default defineComponent({
  setup(props, context) {
    const state = reactive(new class {
      stationName = '';

      stationsGroup: any = [];

      stationCode: any = 0;

      type: any = 1;

      init: any = 0;

      loadingInstance: any = null;

      stations: any = [];

      monitoringStations: any = [];

      searchDate: any = [new Date(), new Date()];
    }());
    const selectVal = ref('');
    const isFullscreen = ref('全屏预览');
    const dialogVisible = ref(false);
    const oilsSaleNum = ref();
    const oilsSaleAmount = ref();
    const oilsSaleTrend = ref();
    const oilsSaleTodayTend = ref();
    const oilsInComeProportion = ref();
    const oilsRanking = ref();
    const oilsOpwRealTimeData = ref();
    const realTimeRevenue = ref();
    const paymentStatistics = ref();
    const trafficVolume = ref();
    const membersOverview = ref();

    // function openLoading() {
    //   state.loadingInstance = ElLoading.service({
    //     fullscreen: true,
    //     text: '加载数据中...',
    //     background: 'rgba(0, 0, 0, 0.7)',
    //   });
    // }

    function closeLoading() {
      state.loadingInstance.close();
    }

    setInterval(() => {
      if (state.init > 0) {
        getAllData();
      }
    }, 1000 * 30);

    async function getAllData() {
      // openLoading();
      Promise.all([
        await oilsSaleNum.value.getData(state.stationCode, state.searchDate),
        await oilsSaleAmount.value.getData(state.stationCode, state.searchDate),
        // await oilsSaleTrend.value.getData(state.stationCode, state.type),
        await oilsSaleTodayTend.value.getData(state.stationCode, state.searchDate),
        await oilsInComeProportion.value.getData(state.stationCode, state.searchDate),
        await oilsRanking.value.getData(state.stationCode, state.searchDate),
        await oilsOpwRealTimeData.value.getData(state.stationCode),
        await realTimeRevenue.value.getData(state.stationCode, state.searchDate),
        await paymentStatistics.value.getData(state.stationCode, state.searchDate),
        await trafficVolume.value.getData(state.stationCode, state.searchDate),
        await membersOverview.value.getData(state.stationCode, state.searchDate),
      ]).then();
      // closeLoading();
    }

    async function getStation() {
      await nextTick(async () => {
        state.stations = await allStation();
        state.monitoringStations = state.stations.slice(2);
        state.stationName = state.stations[0]['站名'];
        state.stationCode = state.stations[0]['站号'];
        dealStationMoreLen();
        await getAllData();
      });
    }

    function dealStationMoreLen() {
      let index = 0;
      let index1 = 0;
      state.stationsGroup = [] as any;
      state.stationsGroup[index1] = [];
      for (const item of state.stations) {
        if (index === 6) {
          index1++;
          state.stationsGroup[index1] = [];
          state.stationsGroup[index1].push(item);
          index = 1;
        }
        state.stationsGroup[index1].push(item);
        index++;
      }
      console.log('stationsGroup', state.stationsGroup);
    }

    watch(() => state.stationCode, async () => {
      if (state.init > 0) {
        // openLoading();
        await getAllData();
        // closeLoading();
      }
    });

    watch(() => state.searchDate, async () => {
      if (state.init > 0) {
        // openLoading();
        await getAllData();
        // closeLoading();
      }
    });

    watch(() => state.type, async () => {
      if (state.init > 0) {
        // openLoading();
        await oilsSaleTrend.value.getData(state.stationCode, state.type);
        // closeLoading();
      }
    });
    watch(() => state.searchDate, async () => {
      await oilsSaleTrend.value.getData(state.stationCode, state.type);
    });
    async function getDataList() {
      await oilsSaleTrend.value.getData(state.stationCode, state.type);
    }
    const router = useRouter();
    async function onChange(val: number) {
      if (val === 3) {
        if (isFullscreen.value === '关闭全屏') {
          document.exitFullscreen();
          isFullscreen.value = '全屏预览';
        }
        await ElMessageBox.confirm('确定要退出登录吗', '提示', {
          type: 'warning',
        });
        const name = sessionStorage.getItem('username');
        await logout(name);
        sessionStorage.clear();
        router.push('/login');
      } else if (val === 2) {
        const rtDiv = document.querySelector('.container');
        if (isFullscreen.value === '全屏预览') {
          if (rtDiv && rtDiv.requestFullscreen) {
            rtDiv.requestFullscreen();
            isFullscreen.value = '关闭全屏';
          }
        } else if (document.exitFullscreen) {
          document.exitFullscreen();
          isFullscreen.value = '全屏预览';
        }
      } else {
        dialogVisible.value = true;
      }
    }
    function handleCommand(command: { 站名: string; 站号: any; }) {
      state.stationName = command.站名;
      state.stationCode = command.站号;
      getDataList()
    }

    onMounted(async () => {
      getStation();
      getDataList();
      state.init++;
    });
    return {
      state,
      handleCommand,
      onChange,
      oilsSaleNum,
      oilsSaleAmount,
      oilsSaleTrend,
      oilsSaleTodayTend,
      oilsInComeProportion,
      oilsRanking,
      oilsOpwRealTimeData,
      realTimeRevenue,
      paymentStatistics,
      trafficVolume,
      membersOverview,
      bgUrl,
      headerUrl,
      logoUrl,
      xjLogo,
      selectVal,
      isFullscreen,
      dialogVisible,
      getDataList,
    };
  },
  components: {
    oilsSaleNum: 油品销售升数与数量,
    oilsSaleAmount: 油品营收金额,
    realTimeRevenue: 实时营收,
    oilsRanking: 服务区油品销量排行,
    oilsOpwRealTimeData: 油品液位仪实时数据,
    oilsSaleTrend: 油品销售金额趋势图,
    oilsSaleTodayTend: 今日时间段消费走势图,
    oilsInComeProportion: 油品营收占比,
    paymentStatistics: 支付方式统计,
    trafficVolume: 今日车流量走势,
    membersOverview: 会员概况,
    monitoring: 监控,
    ElSelect,
    ElDialog,
  },
});
</script>

<style>
.model_box .el-dialog{
  background: #2b83eb !important;
}
.el-dialog__headerbtn .el-dialog__close{
  color: #fff !important;
}
.el-date-table {
  font-size: 1rem;
}

.el-date-table tr th{
  border-bottom:1px solid #01c0f7;
  color: white;
}

.el-date-range-picker__content{
  background-color: #0b002f;
  border: 2px solid #01c0f7;
}

.el-date-range-picker__header div {
  color: white;
  font-size: 1rem;
}

/* .el-scrollbar {
  border: 2px solid #01c0f7;
  width: 10rem;
} */

.el-dropdown__popper {
  /*background-color: #09002a;*/
}

.el-dropdown-menu {
  border-radius: 0;
  background-color: #0b002f;
}

.el-dropdown-menu__item {
  font-size: 1.5rem;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
}

.el-dropdown__popper {
  --el-dropdown-menuItem-hover-fill:#0118f7;
  --el-dropdown-menuItem-hover-color:white;
}
.available .el-date-table-cell__text{
  font-weight: bold;
}

</style>

<style scoped>
.button-size {
  margin: 0;
  padding: 0;
  width: 2rem;
  height: 0.8rem;
  margin: 0.1rem;
}

.container {
  height: 100%;
  width: 100%;
}

#header {
  position: relative;
  height: 7%;
}
.logo {
  position: absolute;
  right: 6.5%;
  top: 2%;
  display: flex;
  align-items: center;
}
.logo img {
  width: 40px;
  height: 48px;
}
.logo_text {
  color: #fff;
  font-size: 14px;
  padding-left: 5px;
}
.header-title {
  line-height: 3.125rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: rgb(1 170 230);
  margin: 0;
  letter-spacing: 0.3125rem;
  padding-right: 1.5%;
}

.body-layout-row-content {
  height: 93%;
}

.body-layout-col {
  height: 98%;
  padding: 1%;
}

.body-chart {
  height: 50%;
  position: relative;
  box-shadow: 0 2px 4px 0 rgb(20, 126, 171) inset, 0 0.5px 1px 0 rgb(20, 126, 171);
}

.body-chart p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  padding-top: 2%;
  margin-left: 0.6rem;
  display: inline-block;
}

.body-chart-summary {
  height: 20%;
  position: relative;
  /*background-color: rgba(0, 0, 128, 0.2);*/
  box-shadow: 0 2px 4px 0 rgb(20, 126, 171) inset, 0 0.5px 1px 0 rgb(20, 126, 171);
}

.body-chart-three {
  height: 33.3%;
  position: relative;
  box-shadow: 0 2px 4px 0 rgb(20, 126, 171) inset, 0 0.5px 1px 0 rgb(20, 126, 171);
}

.body-chart-three p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  padding-top: 2%;
  margin-left: 2%;
}

.horn > div {
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
}

.horn .lt {
  border-top: 0.3125rem solid #00d3e7;
  border-left: 0.3125rem solid #00d3e7;
  left: -2px;
  top: -2px;
}

.horn .rb {
  border-bottom: 0.3125rem solid #00d3e7;
  border-right: 0.3125rem solid #00d3e7;
  right: -2px;
  bottom: -2px;
}

/*.el-dropdown-link {*/
/*  color: white;*/
/*}*/

/*.el-dropdown-link {*/
/*  cursor: pointer;*/
/*}*/

.container >>> .el-date-editor--daterange {
  position: absolute;
  top: 2%;
  left: 1%;
  background-color: #0a0029;
  box-shadow: 0 0px 0px 0 rgb(20 126 171) inset, 0 0.5px 1px 1px rgb(20 126 171);
  border: 0px solid rgb(20 126 171);
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /*background: #0d2746;*/
  /*border: 1px solid rgb(20, 126, 171);*/
  /*-webkit-appearance: none;*/
  /*box-sizing: border-box;*/
  /*outline: none;*/
  /*margin: 0;*/
  /*transition: .1s;*/
  font-weight: 500;
  /*-moz-user-select: none;*/
  /*-webkit-user-select: none;*/
  /*-ms-user-select: none;*/
  color: white;
  /*border-radius: 4px;*/
  width: 28rem;
  height: 3rem;
  font-size: 1rem;
  text-align: center;
}

.container >>> .el-date-editor--daterange i {
  font-size: 1.3rem;
  padding-bottom: 10px;
}

.container >>> .el-range-input {
  font-size: 1.3rem;
  color: white;
  background-color: #0a0029;
}

.container >>> .el-range-separator {
  color: white;
}

/*.station_name {*/
/*  position: absolute;*/
/*  top: 3%;*/
/*  box-shadow: rgb(20 126 171) 0px 2px 4px 0px inset, rgb(20 126 171) 0px 0.5px 1px 0px;*/
/*  width: 40px;*/
/*  height: 30px;*/
/*  text-align: center;*/
/*  line-height: 30px;*/
/*  left: 1%;*/
/*  color: #00d3e7;*/
/*  font-size: 14px;*/
/*}*/
.select{
  width: 95px;
  height: 3rem;
  box-shadow: rgb(20 126 171) 0px 2px 4px 0px inset, rgb(20 126 171) 0px 0.5px 1px 0px;
  background: transparent;
  color: #fff;
  border: none;
  outline: none;
  position: absolute;
  top: 2%; right: 1%;color:#fff;
  cursor: pointer;
}
.select p {
  text-align: center;
}
.select p img {
    width: 13px;
    height: 13px;
    position: relative;
    left: 7px;
    top: 3px;
}
option{
  color: #333;
  height: 35px;
}

.select-ul{
  list-style: none;
  width: 150px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 95%;
  padding: 0;
  z-index: 100;
  box-shadow: rgb(20 126 171) 0px 2px 4px 0px inset, rgb(20 126 171) 0px 0.5px 1px 0px;
  background: transparent;
  margin: 0;
  display: none;
}
.select:hover .select-ul{
  display: block;
}
.select-ul li {
  color: #fff;
  text-align: center;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
}
.select-ul li:hover{
  background: #00d3e7;
  color: #000;
}

</style>
